<template>
  <div class="declare-detail">
    <!-- 申报信息 -->
    <div class="declare-info">
      <div class="section-title">申报信息</div>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">申报时间：</span>
          <span class="value">{{
            recordData.applyTime || "2025-06-25 11:12:36"
          }}</span>
        </div>
        <div class="info-item">
          <span class="label">是否参与邀约：</span>
          <span class="value">是</span>
        </div>
        <div class="info-item">
          <span class="label">最大日备用容量：</span>
          <span class="value"
            >{{ recordData.maxDailyCapacity || "10000" }} kW</span
          >
        </div>
        <div class="info-item">
          <span class="label">备用用户数量：</span>
          <span class="value">8 个</span>
        </div>
        <div class="info-item">
          <span class="label">备用资源数量：</span>
          <span class="value">1 个</span>
        </div>
      </div>
    </div>

    <!-- 备用用户资源清单 -->
    <div class="user-resource-list">
      <div class="section-title">
        备用用户资源清单
        <VerticalAlignBottomOutlined style="font-size: 18px; cursor: pointer" />
      </div>
      <a-table
        :dataSource="userResourceData"
        :columns="userResourceColumns"
        :pagination="false"
        size="small"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'index'">
            {{ record.index }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"

const props = defineProps({
  recordData: {
    type: Object,
    default: () => ({}),
  },
})

// 用户资源数据
const userResourceData = ref([
  {
    key: "1",
    index: 1,
    userName: "广州铭祥汽车零部件有限公司",
    userCode: "08001200446314110",
    resourceCode: "100101",
    resourceCapacity: 1000,
    resourceType: "储能",
  },
  {
    key: "2",
    index: 2,
    userName: "广州铭祥汽车零部件有限公司",
    userCode: "08001200446314110",
    resourceCode: "100102",
    resourceCapacity: 3200,
    resourceType: "储能",
  },
  {
    key: "3",
    index: 3,
    userName: "天活松林光学（广州）有限公司",
    userCode: "08001300043551100",
    resourceCode: "100201",
    resourceCapacity: 6700,
    resourceType: "储能",
  },
])

// 表格列配置
const userResourceColumns = ref([
  {
    title: "序号",
    key: "index",
    width: 80,
    align: "center",
  },
  {
    title: "用户名称",
    dataIndex: "userName",
    key: "userName",
    width: 200,
    align: "center",
  },
  {
    title: "用户编号",
    dataIndex: "userCode",
    key: "userCode",
    width: 150,
    align: "center",
  },
  {
    title: "资源编号",
    dataIndex: "resourceCode",
    key: "resourceCode",
    width: 120,
    align: "center",
  },
  {
    title: "资源备用容量（kW）",
    dataIndex: "resourceCapacity",
    key: "resourceCapacity",
    width: 150,
    align: "center",
  },
  {
    title: "资源类型",
    dataIndex: "resourceType",
    key: "resourceType",
    width: 100,
    align: "center",
  },
])
</script>

<style lang="less" scoped>
.declare-detail {
  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #fff;
  }

  .declare-info {
    margin-bottom: 32px;

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;

      .info-item {
        display: flex;

        .label {
          color: #999;
          margin-right: 8px;
          min-width: 120px;
        }

        .value {
          color: #fff;
        }
      }
    }
  }

  .user-resource-list {
    :deep(.ant-table) {
      background: #141414;

      .ant-table-thead > tr > th {
        background: #262626;
        color: #fff;
        border-color: #303030;
        text-align: center;
      }

      .ant-table-tbody > tr > td {
        background: #141414;
        color: #fff;
        border-color: #303030;
      }

      .ant-table-tbody > tr:hover > td {
        background: #262626 !important;
      }
    }
  }
}
</style>
